/*
  学习目标：Route组件的使用说明

  步骤：
     1. React中默认，从上向下，依次匹配，从头匹配到尾,与vue不同，vue是当前级别匹配到就停止
     2. Route组件匹配任意路径的两种方式
      2.1  path写一个/ , 原理是模糊匹配
      2.2  表示匹配任意路径，类似vue中的通配符，不写path，设置 exact 无效
      2.3  如果真的要需要匹配 /,那么使用path='/' exact
*/
import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Link,
} from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Link to="/">首页</Link>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">发现</Link>
          <br />
          {/* 2. 通配写法 - 方式1 path='/' 利用模糊匹配  */}
          <Route path="/" component={Header}></Route>
          {/* 2. 通配写法 - 方式2 不写path，类似vue中的通配 */}
          <Route component={Header}></Route>
          {/* 3. 如果真的要需要匹配 /,那么使用path='/' exact */}
          <Route path="/" component={Home} exact></Route>

          {/* 1. React中默认，从上向下，依次匹配，从头匹配到尾 */}
          <Route path="/My" component={My}></Route>
          <Route path="/My" component={My}></Route>
          <Route path="/My" component={My}></Route>
          <Route path="/Friend" component={Friend}></Route>
        </Router>
      </div>
    );
  }
}

function Header() {
  return <div>我是Header组件-所有人都能看到我</div>;
}
function Home() {
  return <div>我是Home组件</div>;
}
function My() {
  return <div>我是My组件</div>;
}
function Friend() {
  return <div>我是Friend组件</div>;
}
